<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 100%;height:400px"></div>
</body>
<script src="../js/echarts.min.js"></script>
<script type="application/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var years = ['2016', '2017', '2018'];
    var jdData = [
        ['香港同胞', '澳门同胞', '台湾同胞', '日  本', '韩  国', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '其  它'],
        ['香港同胞', '澳门同胞', '台湾同胞', '日  本', '韩  国', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '其  它'],
        ['香港同胞', '澳门同胞', '台湾同胞', '日  本', '韩  国', '蒙  古', '印度尼西亚', '马来西亚', '菲律宾', '新加坡', '泰  国', '印  度', '越  南', '缅  甸', '朝  鲜', '巴基斯坦', '其  它']
    ]
    var data = [
        [13.2, 1.11, 13.6, 9284, 64138, 2237, 4779, 48877, 2371, 36224, 12956, 2499, 4778, 594, 717, 534, 16487],
        [15.26, 1.31, 16.68, 10331, 91580, 1909, 40469, 67490, 1765, 36982, 15371, 3643, 2871, 762, 962, 757, 34414],
        [14.23, 1.31, 21.13, 10873, 94964, 2966, 129748, 59827, 8519, 38344, 18495, 3531, 1369, 544, 2005, 975, 33855, ],
    ];

    option = {

        baseOption: {
            backgroundColor: '#2c343c', //背景颜色
            timeline: {
                data: years,
                axisType: 'category',
                autoPlay: true,
                playInterval: 1500, //播放速度

                left: '5%',
                bottom: '-24px',
                width: '90%',
                //  height: null,
                label: {
                    normal: {
                        textStyle: {

                            color: 'red',
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: 'red'
                        }
                    }
                },
                symbolSize: 8,
                lineStyle: {
                    color: '#red'
                },
                checkpointStyle: {
                    borderColor: '#red',
                    borderWidth: 1
                },
                controlStyle: {
                    showNextBtn: false,
                    showPrevBtn: false,
                    normal: {
                        color: '#5052EE',
                        borderColor: '#5052EE'
                    },
                    emphasis: {
                        color: 'red',
                        borderColor: 'red'
                    }
                },

            },
            title: {
                text: '',
                right: '2%',
                bottom: '8%',
                textStyle: {
                    fontSize: 20,
                    color: 'black' //标题字体颜色
                }
            },
            calculable: true,
            grid: {
                left: '8%',
                right: '2%',
                bottom: '6%',
                top: '0%',
                containLabel: true
            },
            label: {
                normal: {
                    textStyle: {
                        color: 'red'
                    }
                }
            },
            yAxis: [{

                nameGap: 50,
                offset: '37',
                'type': 'category',
                interval: 50,
                //inverse: ture,//图表倒叙或者正序排版
                data: '',
                nameTextStyle: {
                    color: 'red'
                },


                axisLabel: {
                    rotate: 45,
                    show: false,
                    textStyle: {
                        fontSize: 15,

                        color: function(params, Index) { // 标签国家字体颜色

                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);//随机生成颜色

                            var colorarrays = ['#6bc0fb', '#7fec9d', '#fedd8b', '#ffa597', '#84e4dd', '#749f83',
                                '#ca8622', '#bda29a', '#a8d8ea', '#aa96da', '#fcbad3', '#ffffd2',
                                '#f38181', '#fce38a', '#eaffd0', '#95e1d3', '#e3fdfd', '#749f83', '#ca8622'
                            ];

                            //console.log("111", Index, colorarrays[Index],params); //打印序列

                            return colorarrays[jdData[0].indexOf(params)];
                        },


                    },
                    interval: 50
                },

            }],
            xAxis: [{
                'type': 'value',
                'name': '',
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#fedd8b'
                    }
                },
            }],
            series: [

                {
                    'name': '',
                    'type': 'bar',
                    markLine: {


                        label: {
                            normal: {
                                show: false
                            }
                        },
                        lineStyle: {

                            normal: {
                                color: 'red',
                                width: 3
                            }
                        },
                    },
                    barWidth: '50%',
                    barGap: '-100%',
                    label: {
                        normal: {
                            show: true,
                            fontSize: 10, //标签国家字体大小
                            position: 'left', //数值显示在右侧
                            formatter: function(p) {
                                return p.name;
                            }
                        }
                    },
                    itemStyle: {
                        barBorderRadius: [0, 33, 33, 0],
                        // 指明颜色渐变的方向
                        // 指明不同百分比之下颜色的值
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: "#5052EE", // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#AB6EE5", // 100% 处的颜色
                            }, ],
                            global: false, // 缺省为 false
                        },
                    },
                }
            ],

            animationEasingUpdate: 'quinticInOut',
            animationDurationUpdate: 1500, //动画效果
        },

        options: []
    };
    for (var n = 0; n < years.length; n++) {

        var res = [];
        //alert(jdData.length);
        for (j = 0; j < data[n].length; j++) {
            res.push({
                name: jdData[0][j],
                value: data[n][j]
            });

        }

        res.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 6);

        res.sort(function(a, b) {
            return a.value - b.value;
        });


        var res1 = [];
        var res2 = [];
        //console.log(res);
        for (t = 0; t < res.length; t++) {
            res1[t] = res[t].name;
            res2[t] = res[t].value;
        }
        option.options.push({
            title: {
                text: years[n] + '年',
                right: '2%',
            },
            yAxis: {
                data: res1,
            },
            series: [{
                data: res2
            }]
        });
    }
    myChart.setOption(option);
</script>

</html>